<template>
  <div id="app" class="app-container">
    <el-header class="header">
      <el-button type="primary" @click="initWebSocket">返回</el-button>
    </el-header>
    <el-main class="main">
      <el-row :gutter="20">
        <el-col :span="12">
          <div class="chart-container" id="chart"></div>
        </el-col>
        <el-col :span="12">
          <div class="leaderboard">
            <h2>选手排行榜</h2>
            <el-table :data="leaderboard" stripe>
              <el-table-column prop="name" label="选手名" width="180"></el-table-column>
              <el-table-column prop="score" label="分数" sortable></el-table-column>
            </el-table>
          </div>
        </el-col>
      </el-row>
    </el-main>
  </div>
</template>

<script>
import * as echarts from 'echarts';
import 'echarts/theme/macarons'; // 引入主题

export default {
  name: 'Leaderboard',
  data() {
    return {
      leaderboard: [
        { name: '选手A', score: 99.99 },
        { name: '选手B', score: 98.50 },
        { name: '选手C', score: 97.80 },
        { name: '选手D', score: 96.75 },
        { name: '选手E', score: 95.60 },
        { name: '选手F', score: 94.45 },
        { name: '选手G', score: 93.30 },
        { name: '选手H', score: 92.15 }
      ],
      chart: null
    };
  },
  mounted() {
    this.initChart();
  },
  methods: {
    initChart() {
      const chartDom = document.getElementById('chart');
      this.chart = echarts.init(chartDom, 'macarons');

      const option = {
        title: {
          text: '选手排行榜',
          left: 'center'
        },
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'shadow'
          }
        },
        grid: {
          left: '3%',
          right: '4%',
          bottom: '3%',
          containLabel: true
        },
        xAxis: {
          type: 'value',
          boundaryGap: [0, 0.01]
        },
        yAxis: {
          type: 'category',
          data: this.leaderboard.map(item => item.name)
        },
        series: [
          {
            name: '分数',
            type: 'bar',
            data: this.leaderboard.map(item => item.score),
            itemStyle: {
              color: params => {
                const colors = ['#FF6F61', '#6B5976', '#95A5A6', '#E74C3C', '#3498DB', '#9B59B6', '#F39C12', '#E67E22'];
                return colors[params.dataIndex % colors.length];
              }
            }
          }
        ]
      };

      this.chart.setOption(option);
    },
    initWebSocket() {
      const wsUrl = 'ws://localhost:8081/api/chat';
      this.ws = new WebSocket(wsUrl);

      this.ws.onmessage = (event) => {
        const newData = JSON.parse(event.data);
        this.leaderboard = newData;
        this.initChart(); // 更新图表
      };
    }
  }
};
</script>

<style scoped>
.app-container {
  height: 100vh;
  display: flex;
  flex-direction: column;
}

.header {
  padding: 20px;
  background-color: #2c3e50;
  color: white;
  text-align: right;
}

.main {
  flex: 1;
  padding: 20px;
  background-color: #ecf0f1;
}

.chart-container {
  width: 100%;
  height: 500px;
  background-color: #ffffff;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
  border-radius: 8px;
}

.leaderboard {
  background-color: #ffffff;
  padding: 20px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
  border-radius: 8px;
}

h2 {
  font-size: 24px;
  margin-bottom: 20px;
  color: #34495e;
}
</style>
